<template>
	<div class="footnav">
		<router-link :to="p.path" v-for="(p,index) in navparam" :key="index">{{p.title}}</router-link>
	</div>
</template>

<script>
	export default{
		name:"Foot",
		props:['navparam']
	}
</script>

<style scoped lang="less">
	@color:rgb(224,224,224),rgb(198,30,0);
	@height:10vh;
	@width:100vw;
	.footnav{
		height: @height;
		border-top: 1px solid extract(@color,1);
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: @width;
		
		a{
			text-decoration: none;
			color: extract(@color,2);
			font-size:1.2rem;
			border-right: 1px solid extract(@color,1);
			width: 25%;
			height: 100%;
			line-height: @height;
			
			&:last-of-type{
				border: none;
			}
			&:hover{
				background-color: extract(@color,2);
				color:white;
			}
		}
	}
</style>